<template>
  <a-space direction="vertical" style="width: 100%">
    <a-card title="品牌查询">
      <a-form :model="queryParams" layout="inline">
        <a-form-item label="品牌名称">
          <a-input v-model:value="queryParams.name" />
        </a-form-item>
        <a-form-item label="品牌状态">
          <a-select v-model:value="queryParams.enabled" style="width: 80px">
            <a-select-option value="true">启用</a-select-option>
            <a-select-option value="false">停用</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit" @click="query">查询</a-button>
        </a-form-item>
        <a-form-item>
          <a-button @click="reset">重置</a-button>
        </a-form-item>
      </a-form>
    </a-card>
    <!--      <a-divider style="border-color: #7cb305" dashed />-->
    <a-card title="查询结果">
      <a-table
        :columns="columns"
        :data-source="brandDataSet"
        rowKey="uid"
        :pagination="paginationConfig"
      >
        <template #action="{ record }">
          <a-button style="margin-right: 10px" @click="edit(record.uid)">修改</a-button>
          <a-button v-if="record.enabled" type="danger" @click="disable(record.uid)">停用</a-button>
          <a-button v-if="!record.enabled" type="primary" @click="enable(record.uid)"
            >启用
          </a-button>
        </template>
        <template #enabled="{ record }">
          <span v-if="record.enabled">启用</span>
          <span v-else>停用</span>
        </template>
      </a-table>
    </a-card>
  </a-space>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { useHttpRequest } from '@/api/chunfeng/apiRequest'
import { UnwrapNestedRefs } from '@vue/reactivity'

import { useBrandApi } from '@/api/chunfeng/brand'
import { BrandData, QueryBrandData } from '@/api/chunfeng/brand/interfaces'

export default defineComponent({
  name: 'BrandList',
  // components: {
  //   Card,
  //   Form
  // },
  setup() {
    const { executeQueryRequest, executeCommandRequest } = useHttpRequest()

    const { queryBrand, enableBrand, disableBrand } = useBrandApi()
    const brandDataSet = ref(Array<BrandData>())

    const paginationConfig = reactive({
      showSizeChanger: true,
    })

    const queryParams: UnwrapNestedRefs<QueryBrandData> = reactive({
      name: undefined,
      enabled: undefined,
    })

    // const { resetFields } = useForm(queryParams)
    const columns = [
      {
        title: '名称',
        dataIndex: 'name',
        key: 'name',
      },

      {
        title: '状态',
        dataIndex: 'enabled',
        key: 'enabled',
        slots: { customRender: 'enabled' },
      },
      {
        title: '备注',
        dataIndex: 'remark',
        key: 'remark',
      },

      {
        title: '操作',
        key: 'action',
        slots: { customRender: 'action' },
      },
    ]

    function enable(uid: string) {
      executeCommandRequest(enableBrand(uid), {
        message: '品牌启用成功',
        callback: () => {
          query()
        },
      })
    }

    function disable(uid: string) {
      executeCommandRequest(disableBrand(uid), {
        message: '品牌停用成功',
        callback: () => {
          query()
        },
      })
    }

    function edit(uid: string) {}

    function reset() {}

    function query() {
      brandDataSet.value.length = 0
      executeQueryRequest(queryBrand(queryParams), (results: BrandData[]) => {
        results?.forEach((value) => {
          brandDataSet.value.push(value)
        })
      })
    }

    return {
      queryParams,
      columns,
      enable,
      disable,
      query,
      brandDataSet,
      paginationConfig,
      edit,
      reset,
    }
  },
})
</script>
